<template>
    <div class="home">
        <mt-swipe class="" :auto="4000">
            <mt-swipe-item v-for="item in swiperImages" :key="item">
                <img src="./img/swiper1.jpeg" />
            </mt-swipe-item>
        </mt-swipe>
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/newslist">
                    <img src="./img/grid1.png" alt="" />
                    <div class="mui-media-body">新闻资讯</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/photolist">
                    <img src="./img/grid2.png" alt="" />
                    <div class="mui-media-body">图片分享</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/goodslist">
                    <img src="./img/grid3.png" alt="" />
                    <div class="mui-media-body">商品购买</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="#">
                    <img src="./img/grid4.png" alt="" />
                    <div class="mui-media-body">留言反馈</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="#">
                    <img src="./img/grid5.png" alt="" />
                    <div class="mui-media-body">视频专区</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="#">
                    <img src="./img/grid6.png" alt="" />
                    <div class="mui-media-body">联系我们</div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
import urlPath from '../../config/api.js';
import {Toast} from 'mint-ui';
export default {
    name: 'Home',
    data() {
        return {
            linkActiveClass: '',
            swiperImages: ['./img/swiper1.jpeg', './img/swiper2.jpeg', './img/swiper3.jpeg'],
            gridList: [{}],
        };
    },
    mounted() {
        this.getSwiperData();
    },
    methods: {
        getSwiperData() {
            this.axios.get(urlPath.home.swiperImages).then((res) => {
                console.log(res);
            })
            .catch((err) =>{
                Toast({
                    message: '加载数据出错',
                    position: 'middle',
                    duration: 3000
                })
            });
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="less" scoped>
.mint-swipe {
    margin: 0px;
    height: 200px;
    .mint-swipe-item {
        background-color: gray;
        img {
            width: 100%;
        }
    }
}
.mui-grid-view {
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    flex-wrap: 1;
    border: none;
}
.mui-table-view-cell {
    background-color: #ffffff;
    border: none !important;
    img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    .mui-media-body {
        font-size: 12px !important;
    }
}
</style>
